<template>
	<view>
		<!-- 登录注册板块 -->
		<view class="login">
			<view class="title">请登录</view>
			<view class="input-content">
				<view class="input-box">
					<image class="input-bg" :src="require('@/static/登录用户.png')" mode="scaleToFill"></image>
					<input class="input-phone" type="text" v-model="phone" placeholder="登录账号" />
				</view>
				<view class="input-box">
					<image class="input-bg" :src="require('@/static/密码.png')" mode="scaleToFill"></image>
					<input class="input-phone" type="text" v-model="password" placeholder="登录密码" v-if="!inputType" />
					<input class="input-phone" type="password" v-model="password" placeholder="登录密码" v-if="inputType" />
					<image class="input-type" :src="inputType ? 
        require('@/static/查看.png') : require('@/static/看过.png')" mode="widthFix" @click="changePw"></image>
				</view>
			</view>
			<button class="login-btn" type="default" @click="doLogin">登录</button>
			<!-- 服务协议板块 -->
			<view class="checkbox">
				<checkbox-group>
					<checkbox v-model="checked" @tap="fun()" shape="circle" size="36" active-color="#CC0000">
						已阅读并同意<text class="user">《用户服务协议》</text>
					</checkbox>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {setToken} from "../../util/auth.js"
	export default {
		data() {
			return {
				inputType: true, //显示密码
				password: '',
				phone: '',
				checked: false
			}
		},
		methods: {
			fun() {
				this.checked = true
			},
			//隐藏显示密码
			changePw() {
				let pw = this.password
				this.inputType = !this.inputType
				this.$nextTick(() => {
					this.password = pw
				})
			},
			//账号密码登录
			async doLogin() {
				var that = this;
				if (that.phone.length == 0 || that.password.length == 0) { //校验非空
					uni.showToast({ //弹框提示
						icon: 'none',
						title: '登录账号或密码不能为空！',
						duration: 2000,
					})
				} else if (!this.checked) { //勾选协议
					uni.showToast({ //弹框提示
						icon: 'none',
						title: '请勾选用户服务协议',
						duration: 2000,
					})
				} else if (this.phone == "15984083879" && this.password == "123456") {
					uni.switchTab({
						url: '/pages/login/login'
					});
					setToken('1111')
				}else if(this.phone!="15984083879"||this.password!="123456"){
					uni.showToast({ //弹框提示
						icon: 'none',
						title: '登录账号或密码错误！',
						duration: 2000,
					})
				}

			}
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.login {
		.bg-content {
			width: 100%;
			height: 450upx;
			position: relative;
			overflow: hidden;

			.bg {
				// width: 100%;
				width: 30upx;
				height: auto;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.title {
			padding: 47upx;
			text-indent: 55upx;
			font-size: 48upx;
			font-weight: 400;
			color: #333333;
		}

		.input-content {
			padding: 0 23upx;

			.input-box {
				position: relative;
				margin: 0 auto;
				padding: 0 50upx;
				height: 120upx;

				.input-bg {
					position: absolute;
					left: 0;
					right: 0;
					top: 40upx;
					bottom: 0;
					width: 30upx;
					height: 30upx;
				}

				.input-phone {
					width: 100%;
					height: 100upx;
				}

				.input-type {
					z-index: 2;
					position: absolute;
					right: 50upx;
					top: 30upx;
					width: 40upx;
					height: auto;
				}
			}
		}

		.login-btn {
			margin-top: 86upx;
			width: 92%;
			height: 104upx;
			background: #CC0000;
			border-radius: 52px;
			color: #FFFFFF;
			box-shadow: 0upx 0upx 20upx rgba(204, 0, 0, 0.2);
		}

		.checkbox {
			width: 92%;
			margin: 20upx auto;
			font-size: 28upx;

			.user {
				color: #0096FF;
			}
		}
	}
</style>
